<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
    <style>
    	body,html{
				background:#EEEEEE
    	}
      .header{
        width: 3rem;
        height:3rem;
        border-radius: 50%;
        overflow: hidden;

      }
      .heaer img{
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
</head>
<body>
  <div class="aui-content" style="margin-bottom:2.5rem">
      <ul class="aui-list aui-list-in">
          <li class="aui-list-item aui-list-item-middle" onclick="changeHeader()" style="height:4rem;">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">用户头像</div>
                  <div class="aui-pull-right header">
                    <img src="" id="userHeader">
                  </div>
              </div>
          </li>
          <li class="aui-list-item" style="height:3rem;">
              <div class="aui-list-item-inner ">
                  <div class="aui-list-item-title">昵称</div>
                  <input type="text" class="aui-pull-right" disabled id="userName" style="width:60% ;text-align:right">

              </div>

          </li>
          <li class="aui-list-item"  style="height:3rem;">
              <div class="aui-list-item-inner ">
                  <div class="aui-list-item-title">真实姓名</div>
                  <input type="text" class="aui-pull-right" id="realName" placeholder="输入真实姓名" style="width:60%;text-align:right">
              </div>
          </li>
          <li class="aui-list-item" onclick="setBank()">
              <div class="aui-list-item-inner aui-list-item-arrow">
                  <div class="aui-list-item-title">银行卡</div>
                  <span class="aui-pull-right" id="bank"></span>
              </div>

          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner ">
                  <div class="aui-list-item-title">支付宝</div>
                  <input type="text" class="aui-pull-right" id="alipay" placeholder="输入支付宝账号" style="width:80%;text-align:right">
              </div>

          </li>
					<li class="aui-list-item">
              <div class="aui-list-item-inner ">
                  <div class="aui-list-item-title">支付宝真实姓名</div>
                  <input type="text" class="aui-pull-right" id="alipayRealName" placeholder="输入支付宝真实姓名" style="width:50%;text-align:right">
              </div>

          </li>

      </ul>
  </div>
  <div style="position: fixed;bottom: 0;left: 0;width: 100%;height: 2.5rem;text-align: center;line-height: 2.5rem;background: #e14104;color: white;font-size: 5.5vw;" onclick="submit()">提交</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript">

  var userInfo;
  var userHeader;
	apiready = function(){
    userInfo = api.pageParam.data;
    var imgObj = new Image();
	imgObj.src = pictureUrl+userInfo.user_header
	imgObj.onload = function(){
		$api.attr($api.byId('userHeader'), 'src', pictureUrl+userInfo.user_header);
	}
	imgObj.onerror = function(){
		$api.attr($api.byId('userHeader'), 'src', '../image/defaultHeader.jpg');
	}
	$api.text($api.byId('bank'), userInfo.bank_num);
    $api.val($api.byId('userName'), userInfo.user_name);
    $api.val($api.byId('realName'), userInfo.real_name);
    $api.val($api.byId('alipay'), userInfo.alipay_num);
		$api.val($api.byId('alipayRealName'), userInfo.alipay_realname);
//  $api.val($api.byId('wx'), userInfo.wx_num);
	};
  function changeHeader(){
    api.actionSheet({
		    cancelTitle: '取消',
		    buttons: ['相机', '照片']
		}, function(ret, err) {
		    var index = ret.buttonIndex;
		    if(index==1){
		    	getPicture('camera')
		    }
		    if(index==2){
		    	getPicture('library');
		    }
		});
  }
  function getPicture(type){
		api.getPicture({
		    sourceType: type,
		    encodingType: 'jpg',
		    mediaValue: 'pic',
		    destinationType: 'url',
		    allowEdit: false,
		    quality: 100,
		    saveToPhotoAlbum: false
		}, function(ret, err) {
		    if (ret) {
		    	if(ret.data != ''){
            userHeader = ret.data;
		    		$api.attr($api.byId('userHeader'), 'src', ret.data);
		    	}
		    } else {
		    	api.alert({
		    		msg:"获取图片失败"
	            });
		    }
		});
	}
  function submit(){
    var data = {};
    data['values'] = {};
    data['files'] = {};
    data['values']['realName'] = $api.val($api.byId('realName'));
    data['values']['userName'] = $api.val($api.byId('userName'));
    data['values']['alipay'] = $api.val($api.byId('alipay'));
		data['values']['alipayRealName'] = $api.val($api.byId('alipayRealName'));
    data['values']['wx'] = '';
    data['values']['userId'] = $api.getStorage('userId');
    data['files']['file'] = userHeader;
    requestData('Users/userEdit',data,'NO','YES','NO',_callbackRelt);
  }
  function _callbackRelt(ret){
    if(ret.status == 200){
      api.toast({
	            msg: ret.msg,
	            duration: 1000,
	            location: 'bottom'
	        });
          api.sendEvent({
              name: 'editDone',

          });

          setTimeout(function(){
            api.closeWin();

          },1000);
    }else{
      api.toast({
	            msg: ret.msg,
	            duration: 1000,
	            location: 'bottom'
	        });
    }
  }
  function setBank(){
  	api.openWin({
        name: 'setBank',
        url: './win.html',
        pageParam: {
            page:'setBank',
            title: '银行卡',
            data:userInfo
        }
    });
  }
</script>
</html>
